<template>
  <vant-form
    ref="form"
    :validate-first="true"
    class="page-p-l page-p-r w-100p"
    input-align="right"
    validate-trigger="onBlur"
  >
    <div v-for="item in formList" class="item" :key="item._id">
      <vehicleSearch
        :key="'field'+item._id"
        :item="item"
        @input="input(item)"
        @change="changeVehicle"
      />

      <app-picker-field
        label="车辆类型"
        v-model="item.vehicleKind"
        :columns="vehicleKind"
        input-align="right"
        :readonly="readonly"
        :rules="[{ required:true }]"
      ></app-picker-field>

      <vant-field
        label="厂牌型号"
        v-model="item.model"
        placeholder="请输入"
        :readonly="readonly"
        input-align="right"
        :rules="[{ required:true }]"
      />

      <app-input-number
        label="整备质量"
        v-model="item.weight"
        placeholder="请输入"
        input-align="right"
        :readonly="readonly"
        :rules="[{ required:true }]"
      >
        <span slot="extra">吨</span>
      </app-input-number>

      <app-input-number
        label="外廓长度"
        v-model="item.length"
        placeholder="请输入"
        input-align="right"
        :readonly="readonly"
        :rules="[{ required:true }]"
      >
        <span slot="extra">米</span>
      </app-input-number>
      <app-input-number
        label="外廓宽度"
        v-model="item.width"
        placeholder="请输入"
        :readonly="readonly"
        input-align="right"
        :rules="[{ required:true }]"
      >
        <span slot="extra">米</span>
      </app-input-number>
      <app-input-number
        label="外廓高度"
        v-model="item.height"
        placeholder="请输入"
        :readonly="readonly"
        input-align="right"
        :rules="[{ required:true }]"
      >
        <span slot="extra">米</span>
      </app-input-number>

      <van-field name="axles" label="轴数">
        <template #input>
          <van-stepper v-model="item.axles" :disabled="readonly" />
        </template>
      </van-field>
      <van-field name="tyres" label="轮胎数">
        <template #input>
          <van-stepper v-model="item.tyres" :disabled="readonly" />
        </template>
      </van-field>

      <vant-field
        label="车辆行驶证照片"
        :rules="[{ validator, message: `请上传${maxCount}张照片` }]"
        class="vant-cell-l"
      >
        <template #input>
          <app-uploader
            v-model="item.driveImgKeys"
            :key="'driveImgKeys'+item._id"
            :deletable="!readonly"
            :max-count="maxCount"
            accept=".png, .jpeg, .jpg"
          />
        </template>
      </vant-field>

      <vant-cell class="flex btns" v-if="!readonly">
        <van-button
          class="flex-1"
          round
          text="新增"
          type="danger"
          @click.stop="add(item)"
          native-type="button"
        />
        <van-button
          class="flex-1"
          round
          text="删除"
          :disabled="formList.length===1"
          type="danger"
          @click.stop="remove(item)"
          native-type="button"
        />
      </vant-cell>
    </div>

    <!--   <app-list-dialog ref="dialog" v-model="show" :list="historyList" @change="changeVehicle">
      <template  v-slot="item">
        <div>{{item.TRANSPRO_REQ_LOWER}}</div>
      </template>
    </app-list-dialog>-->
  </vant-form>
</template>

<script>
import { saveGovVehicles } from '@apis/apply'
import { getHistoryVehicles } from '@apis/history'
import mixin from './mixin'
export default {
  name: 'ApplyVehicleList',
  components: {
    vehicleSearch: () => import('./vehicleSearch')
  },
  mixins: [mixin],
  props: {
    reqNo: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      maxCount: 2,
      showPop: false,
      vehicleKind: this.$store.getters['vehicle/kind'],
      formList: this.curForm.length ? this.curForm : [],
      // show:false,
      selectId: '',
      // historyList:[]
    }
  },
  watch: {
    curForm(v, oldv) {
      v !== oldv && (this.curForm.length && (this.formList = this.curForm));
    }
  },
  computed: {
    readonly() {
      return !!this.reqNo
    }
  },
  mounted() {
    this.saveGovVehicles();

    const lastItem = this.formList[this.formList.length - 1]
    if (!lastItem || !lastItem.vehicleNo) {
      this.createItem()
    }

  },
  methods: {
    /* clickVehicleNo(item) {
      item._immediateSearch = true;

      const field = this.$refs['field' + item._id][0].$el;
      this.$_autoEl = this.$_autoEl || getOverflowAutoEl(field);
      scrollToEle(field, this.$_autoEl)
    }, */
    getOptions() {
      return getHistoryVehicles().then(res => {
        const { data = [] } = res || {}
        return data.map(item => ({ ...item, value: item.vehicleNo, text: item.vehicleNo }))
      })
    },
    saveGovVehicles() {
      saveGovVehicles({ reqNo: this.reqNo }).then(res => {
        const { data = [] } = res || {};
        this.formList = data.map(item => ({ ...item, _id: this.createId() }))
      })
    },
    validator(val) {
      return val && val.length === this.maxCount
    },
    createId() {
      return Math.random().toFixed(20);
    },
    createItem(i) {
      const _id = this.createId();
      const flag = this.formList.some(item => item._id === _id);


      if (!flag) {
        if (i === undefined) {
          this.formList.push({ _id, driveImgKeys: '' })
        } else {
          this.formList.splice(i + 1, 0, { _id, driveImgKeys: '' })
        }
      } else {
        this.createItem()
      }
    },
    add(item) {
      const i = this.formList.findIndex(form => form._id === item._id);
      if (i >= 0) {
        this.createItem(i)
      }
    },
    remove(item) {
      const i = this.formList.findIndex(form => form._id === item._id);
      if (i >= 0) {
        this.formList.splice(i, 1)
      }
    },
    submit() {
      return Promise.resolve(this.formList);
    },
    input(item) {
      this.selectId = item._id
    },
    changeVehicle(item = {}) {
      const i = this.formList.findIndex(form => form._id === this.selectId)
      /* 
       const data = {
         vehicleKind:'20',
         model:'哈弗H6',
         weight:3.2*Math.random(),
         length:1.2*Math.random(),
         width:2.2*Math.random(),
         height:5.2*Math.random(),
         axles:3,
         tyres:6,
         driveImgKeys:''
       }; */
      this.formList.splice(i, 1, {
        ...this.formList[i],
        ...item
      })
      //  this.$set(this.formList[i], key,{...,this.formList[i],} item[key])

      /*  Object.keys(item).forEach(key => {
         this.$set(this.formList[i], key,{...,this.formList[i],} item[key])
       }) */
    }
  }
}
</script>

<style lang="less" scoped>
.item {
  margin-top: @s-20;
  border: 1px solid @c-ccc;
  border-radius: @radius-4;
  box-shadow: 2px 2px 10px @c-ccc;
  overflow: hidden;
}
.btns {
  padding-top: @s-10;
  & /deep/ .van-cell__value {
    display: flex;
  }
  .van-button--round {
    & + .van-button--round {
      margin-left: @s-20;
    }
  }
}
</style>